<template>
  <div id="content" class="sysDialog">
    <el-dialog
      :title="pageName"
      :visible.sync="dialogTableVisible"
      :before-close="handleClose"
      width="1000px"
    >
      <el-tabs v-model="pageType" type="card" @tab-click="handleClick">
        <el-tab-pane label="系统参数" name="sysDialog">
          <!-- 系统参数组件 -->
          <sysDialog
            v-show="pageType == 'sysDialog'"
            ref="sysDialogDom"
            @systemParameClose="systemParameClose"
          />
        </el-tab-pane>
        <el-tab-pane label="保障参数" name="safeguard">
          <!-- hess参数组件 -->
          <safeguard
            v-show="pageType == 'safeguard'"
            ref="safeguardDom"
            @systemParameClose="systemParameClose"
          />
        </el-tab-pane>
      </el-tabs>

      <div class="hei30" />
    </el-dialog>
  </div>
</template>

<script>
import sysDialog from '@/views/console/securityGroup/groupDialog/sysDialog/sysDialog'
import safeguard from '@/views/console/securityGroup/groupDialog/sysDialog/safeguard'

export default {
  name: 'SysIndex',
  components: {
    sysDialog,
    safeguard
  },
  data() {
    return {
      dialogTableVisible: false,
      pageType: 'sysDialog',
      pageName: '',
      item: ''
    }
  },
  watch: {},
  methods: {
    handleClose: function() {
      this.dialogTableVisible = false
    },
    init(row) {
      this.item = row
      this.pageName = '系统参数'
      this.dialogTableVisible = true
      this.$nextTick(function() {
        this.$refs.sysDialogDom.initSystemParame(this.item)
        this.$refs.safeguardDom.initSystemParame(this.item)
      })
    },
    handleClick: function() {
      if (this.pageType == 'sysDialog') {
        this.pageName = '系统参数'
      } else if (this.pageType == 'safeguard') {
        this.pageName = '保障参数'
      }
    },
    systemParameClose() {
      this.dialogTableVisible = false
    }
  }
}
</script>

<style scoped="scoped">
.hei30 {
  height: 30px;
}
</style>
